<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <div th:insert="/common/common.html"></div>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
    var setting = {
      check: {
        enable: true,
        autoCheckTrigger: true
      },
      async: {
        enable: true,
        dataType: "json",
        url: "/menu/getMenuZtree",
        autoParam: ["id", "name"]
      },
      view: {
        addHoverDom: function (treeId, treeNode) {
          var aObj = $("#" + treeNode.tId + "_a");
          if (treeNode.editNameFlag || $("#btnGroup" + treeNode.tId).length > 0) return;
          var s = '<span id="btnGroup' + treeNode.tId + '">';
          if (treeNode.level == 0) {
            s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" onclick="addNode(' + treeNode.id + ')" href="#" >添加</a>';
          } else if (treeNode.level == 1) {
            s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;"  onclick="editNode(' + treeNode.id + ')" href="#" title="修改权限信息">修改</a>';
            if (treeNode.children == undefined) {
              s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" onclick="deleteNode(' + treeNode.id + ')" href="#" >删除</a>';
            }
            s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" onclick="addNode(' + treeNode.id + ')" href="#" >添加</a>';
          } else if (treeNode.level == 2) {
            s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;"  onclick="editNode(' + treeNode.id + ')" href="#" title="修改权限信息">修改</a>';
            s += '<a class="btn btn-info dropdown-toggle btn-xs" style="margin-left:10px;padding-top:0px;" onclick="deleteNode(' + treeNode.id + ')" href="#">删除</a>';
          }
          s += '</span>';
          aObj.after(s);
        },
        removeHoverDom: function (treeId, treeNode) {
          $("#btnGroup" + treeNode.tId).remove();
        }
      }
    };
    $(document).ready(function () {
      $.fn.zTree.init($("#treeDemo"), setting);
    });
  </script>
</head>
<body>
<form id="add_form">
  <div class="form-group">
    <input type="text" class="form-control" name="roleName" placeholder="角色名称">
  </div>
  权限:
  <div class="zTreeDemoBackground left">
    <ul id="treeDemo" class="ztree"></ul>
  </div>
</form>
</body>
</html>